// webpack 插件
const { merge } = require('webpack-merge')
const MiniCssExtractPlugin = require('mini-css-extract-plugin') // 提取 css
const TerserWebpackPlugin = require('terser-webpack-plugin') // 压缩 js
// webpack 公共配置
const common = require('./webpack.common')

// 生成文件名 hash 规则
const hashRule = '[name]_[contenthash:8]'

// 合并公共配置和生产环境配置
module.exports = merge(common, {
  mode: 'production',
  // 关闭 source map
  devtool: false,
  plugins: [
    new MiniCssExtractPlugin({
      // 抽离 css 文件名
      filename: `css/${hashRule}.css`,
      // 抽离 css chunk 文件名
      chunkFilename: `css/${hashRule}.chunk.css`
    })
  ],
  module: {
    rules: [
      {
        test: /\.(css|scss)$/,
        // loader 的执行顺序是从下到上，从右到左
        use: [
          MiniCssExtractPlugin.loader, // mini-css-extract-plugin 自带的 loader
          {
            loader: 'css-loader',
            options: {
              // css 中通过 @import 引入的文件，也要先执行 sass-loader + postcss-loader
              importLoaders: 2
            }
          },
          'postcss-loader',
          'sass-loader'
        ]
      }
    ]
  },
  optimization: {
    minimizer: [
      new TerserWebpackPlugin({
        parallel: true, // 开启多进程压缩 js
        terserOptions: {
          compress: {
            drop_console: true, // 删除 console
            drop_debugger: true // 删除 debugger
          }
        }
      }),
      '...' // 其余保持默认值
    ]
  }
})
